<template>
	<view class="milestonneview">
		<uni-nav-bar left-icon="left" title="亲子课里程碑">

		</uni-nav-bar>
		<scroll-view scroll-x="true" style="background-color: #fff;margin: 50% 0;padding: 30rpx 10rpx;">
			<view class="scro_dis">
				<view class="" v-for="(item,index) in contentdata" class="itemall" @tap="tapitem(item)">
					<view class="imgtoppick">
						<image style="width: 140rpx;position: relative;"
							src="../../static/img/milestone/Snipaste_2024-04-19_20-47-18.jpg" mode="widthFix"></image>
						<view class="millist">
							里程碑{{index + 1}}
						</view>
					</view>
					<view class="iimgall">
						<image class="img" src="../../static/img/milestone/Snipaste_2024-04-19_19-51-15.jpg"
							mode="widthFix"></image>
						<image class="img" src="../../static/img/milestone/Snipaste_2024-04-19_19-51-15_爱奇艺(1).jpg"
							mode="widthFix"></image>
					</view>
					<view :class="index%2 == 1? 'line1' : 'line2'">

					</view>
					<view :class="index%2 == 1? 'titicon1' : 'titicon2'">
						<image class="titiconimg"
							:src="index%2 == 1? '../../static/img/milestone/Snipaste_2024-04-19_20-23-44.jpg': '../../static/img/milestone/Snipaste_2024-04-19_20-43-13.jpg' "
							mode="widthFix"></image>
						<view class="title">
							<uni-tooltip class="item" :content="'编号'+item.contentid" placement="bottom">
								<view>{{item.title}}</view>
							</uni-tooltip>

						</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<uni-drawer ref="showRight" mode="left" :width="320" @change="drawer_change">
			<scroll-view style="height: 100%;" scroll-y="true">
				<uni-section class="mb-10" :title="'`'+row.title+'`'+'线下亲子课评价'"></uni-section>
				<view style="line-height: 30rpx;">
					<button @tap="savemsg" style="position: absolute;right: 0;top: 0;font-size: 
					22rpx;background-color: #9c446e;color: #fff;">保存</button>
				</view>

				<uni-row class="demo-uni-row">
					<uni-col :span="12">
						<uni-section title="孩子参与度" type="line">
							<uni-rate touchable="false" v-model="formdata.participation"  />
						</uni-section>
					</uni-col>
					<uni-col :span="12">
						<uni-section title="亲子课满意度">
							<uni-rate touchable="false" v-model="formdata.satisfaction"  />
						</uni-section>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row">
					<uni-col :span="12">
						<uni-section title="孩子学习能力" type="line">
							<uni-rate touchable="false" v-model="formdata.study"
								active-color="red" />
						</uni-section>
					</uni-col>
					<uni-col :span="12">
						<uni-section title="沟通能力">
							<uni-rate touchable="false" v-model="formdata.communication" 
								active-color="red" />
						</uni-section>
					</uni-col>
				</uni-row>

				<uni-row class="demo-uni-row">
					<uni-col :span="12">
						<uni-section title="孩子情绪管理" type="line">
							<uni-rate touchable="false" v-model="formdata.management" 
								active-color="#2052e0" />
						</uni-section>
					</uni-col>
					<uni-col :span="12">
						<uni-section title="创新能力">
							<uni-rate touchable="false" v-model="formdata.createi" 
								active-color="#2052e0" />
						</uni-section>
					</uni-col>
				</uni-row>



				<uni-section title="孩子自我管理" type="line">
					<uni-rate touchable="false" v-model="formdata.self_management"  />
				</uni-section>
				<uni-section title="父母认知感悟" title-color="#fff" style="background-color: #cd5a91;">
					<uni-easyinput type="textarea" autoHeight v-model="whatsay" placeholder="请输入内容"></uni-easyinput>
				</uni-section>
				<uni-card title="已上传亲子图片" v-if="showimg.length">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="itt in showimg">
							<view class="swiper-item" >
								<image :src="itt" mode="heightFix" style="height: 200rpx;"></image>
							</view>
						</swiper-item>
						
					</swiper>
					
				</uni-card>
				<uni-card title="已上传里程碑视频" v-if="showimg.length">
					<view class="swiper-item" v-for="(itt,innd) in showvideo" :key="innd">
						<video :src="itt" controls style="height: 200rpx;width: 200rpx;"></video>
					</view>
				</uni-card>
				<uni-section title="活动亲子图片" title-color="#9c446e" style="font-weight: 600;">
					<view class="example-body">
						<uni-file-picker limit="4" title="亲子精彩瞬间" @success="success_upimg"
							></uni-file-picker>
					</view>
				</uni-section>
				<uni-section title="活动亲子视频" title-color="#9c446e" style="font-weight: 600;">
					<view class="example-body">
						<uni-file-picker limit="4" file-mediatype="video" title="亲子精彩瞬间视频" 
							@success="success_video"></uni-file-picker>
					</view>
				</uni-section>
			</scroll-view>
		</uni-drawer>
		<image class="frienddetailimg" mode="aspectFill" src="../../static/img/milestone/zj_img1.jpg"></image>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				baseurl: "https://zyc618.mynatapp.cc",
				contentdata: [],
				formdata: {
					participation: 0,
					satisfaction: 0,
					study: 0,
					communication: 0,
					self_management: 0,
					createi: 0,
					management: 0,
				},
				whatsay: "",
				row: {}, //克隆
				imglist: [],
				showimg:[],
				videolist: [],
				showvideo:[],
				
			};
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			//获取亲子内容:
			getdatalist(index) {
				uni.showToast({
					title: "请稍等..",
					icon: "none",
					duration: 500,
					mask: true,
					success: () => {
						$http.request({
							url: "/getcontent",
							method: "POST",
							data: {
								userid: this.userInfo.id,
								teacherid: index
							}
						}).then((res) => {

							this.contentdata = res.results
						}).catch(() => {

						})
					}
				})

			},
			tapitem(item) {
				this.row = item;
				//发起请求获取数据:
				this.select_milestone(this.row.contentid)
				this.$refs.showRight.open();
			},
			select_milestone(index) {
				
				
				$http.request({
					url: "/save/select_milestone",
					method: "POST",
					header: {
						token: true
					},
					data: {
						id: index,
					}
				}).then((res) => {
					
					this.formdata.participation = res.participation;
					this.formdata.satisfaction = res.satisfaction;
					this.formdata.study = res.study;
					this.formdata.communication = res.communication;
					this.formdata.self_management = res.self_management;
					this.formdata.management = res.management;
					this.formdata.createi = res.createi;
					this.whatsay = res.whatsay;
					this.showimg =JSON.parse(res.imglist ).map((str) => {
						return this.baseurl + str;
					});
					this.showvideo =JSON.parse(res.videolist).map((str) => {
						return this.baseurl + str;
					});
					this.imglist = JSON.parse(res.imglist);
					this.videolist = JSON.parse(res.videolist);
					
				}).catch((err) => {
					console.log(err);
				})
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
				//手动清空:
				this.formdata = {
					participation: 0,
					satisfaction: 0,
					study: 0,
					communication: 0,
					self_management: 0,
					createi: 0,
					management: 0,
				};
				this.whatsay = [];
				this.imglist=[];
				this.showimg=[];
				this.videolist= [];
				this.showvideo=[];
			},

			// 图片上传成功
			success_upimg(e) {
				// console.log('上传成功',e)
				this.saveimgfun(e.tempFilePaths[e.tempFilePaths.length - 1])
			},
			//上传图片命名日期
			formattedDate() {
				const rawDate = new Date();
				const year = rawDate.getFullYear();
				const month = (rawDate.getMonth() + 1).toString().padStart(2, '0');
				const day = rawDate.getDate().toString().padStart(2, '0');
				return `${year}${month}${day}`;
			},
			//图片上传服务器:
			saveimgfun(pathfile) {
				const uploadTask = uni.uploadFile({
					url: this.baseurl + '/api/files/upload', //仅为示例，非真实的接口地址
					filePath: pathfile,
					name: 'file',
					success: (uploadFileRes) => {
						let imgdatalist = JSON.parse(uploadFileRes.data);
						
						if (imgdatalist.code == 200) {
							uni.showToast({
								title:"图片上传成功",
								icon:"none"
							})
							this.imglist.push(imgdatalist.data.url); //c存放4张图片
							
							
							
						}
					}
				});

			},
			//视频上传服务器
			success_video(e) {

				const uploadTask = uni.uploadFile({
					url: this.baseurl + '/api/files/upload', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[e.tempFilePaths.length - 1],
					name: 'file',
					formData: {
						url: this.formattedDate(),
						pathname: this.userInfo.id + Date.now()
					},
					success: (uploadFileRes) => {
						let imgdatalist = JSON.parse(uploadFileRes.data);
						
						if (imgdatalist.code == 200) {
							uni.showToast({
								title:"视频上传成功",
								icon:"none"
							})
							this.videolist.push(imgdatalist.data.url); //存放4个视频
							
							
						}
					}
				});

			},
			//保存按钮
			savemsg() {
				//地址
				$http.request({
					url: "/save/milestone",
					method: "POST",
					header: {
						token: true
					},
					data: {
						formdata: this.formdata,
						imglist: JSON.stringify(this.imglist),
						videolist: JSON.stringify(this.videolist),
						id: this.row.contentid,
						whatsay: this.whatsay
					}
				}).then((res) => {
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}

				}).catch((err) => {
					console.log(err);
				})

			},
			drawer_change(e){
				if(! e){
					this.formdata = {
						participation: 0,
						satisfaction: 0,
						study: 0,
						communication: 0,
						self_management: 0,
						createi: 0,
						management: 0,
					};
					this.whatsay = "";
					this.imglist=[];
					this.showimg=[];
					this.videolist= [];
					this.showvideo=[];
				}
			}
		},
		onLoad(e) {
			if (e.hasOwnProperty('teacherid')) {
				this.getdatalist(e.teacherid)
			}

		}
	}
</script>

<style lang="scss">
	.milestonneview {
		height: 90vh;



	}

	.img {
		width: 140rpx;

	}

	.scro_dis {
		display: flex;

	}

	.itemall {
		height: 510rpx;
		position: relative;

		.imgtoppick {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
			right: 0;

			.millist {
				text-align: center;
				font-weight: 600;
				position: absolute;
				font-size: 24rpx;
				font-family: 'Courier New', Courier, monospace;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;

			}
		}

		.iimgall {
			display: flex;
		}

		.line1 {
			position: absolute;
			bottom: 106rpx;
			right: 96rpx;
			border-right: 6rpx dashed #66b2ff;
			height: 150rpx;
		}

		.line2 {
			position: absolute;
			bottom: 156rpx;
			right: 96rpx;
			border-right: 6rpx dashed #66b2ff;
			height: 100rpx;
		}

		.titicon1 {
			position: absolute;
			bottom: 0;
			right: 0;

			.titiconimg {
				width: 200rpx;
				position: relative;
			}

			.title {
				display: flex;
				position: absolute;
				top: 50%;

				transform: translateY(-50%);
				padding: 0 0;
				font-weight: 600;
				font-size: 24rpx;
				font-family: 'Courier New', Courier, monospace;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}

		.titicon2 {
			position: absolute;
			bottom: 40rpx;
			right: 0;

			.titiconimg {
				width: 200rpx;
				position: relative;
			}

			.title {
				display: flex;
				position: absolute;
				top: 50%;

				transform: translateY(-50%);
				font-weight: 600;
				padding: 0 0;
				font-size: 24rpx;
				font-family: 'Courier New', Courier, monospace;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}

	.frienddetailimg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: -10rpx;
		top: -10rpx;
		z-index: -999;
		opacity: 0.7;
	}

	.item {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 100rpx;
		border-radius: 10px;

	}
</style>